<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>全国各地城市实时天气预报查询HTML5网页模板</title>
    <meta name="keywords" content="全国各地,城市,实时天气,预报,查询,HTML5网页模板" />
    <meta name="description" content="全国各地城市实时天气预报查询HTML5网页模板下载。左上输入想要查询的城市（支持市和县），点击查询即可获取当天及未来5天的天气预报。" />
    <link rel="stylesheet" href="css/weather.css" />
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <header>
        <h1>天气预报</h1>
        <div id="weather_search">
            <span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span>
            <span><input id="btn" type="button" value=" 查询天气" /></span>
        </div>
    </header>
    <section>
        <div id="today_container">
            <div>
                <!-- <img src="images/weather_icon/1.png" id="today_img" alt="今日天气" /> -->
            </div>
            <div>
                <div class="main_info">
                    <span class="info" id="today_city">城市</span>|
                    <span class="info" id="today_date">201X-XX-XX</span>|
                    <span class="info" id="today_week">星期X</span>|
                    <span class="info" id="today_other">---</span>
                </div>
                <div class="more_info">
                    今日温度：<span class="info" id="today_wd">-----</span>
                    风力：<span class="info" id="today_fl">-----</span>
                    风向：<span class="info" id="today_fx">-----</span>
                    降雨量：<span class="info" id="today_pm">--</span>
                </div>
                <div class="more_info" style="margin-left:150px">
                    紫外线强度：<span class="info" id="today_zwx">---</span>
                    能见度：<span class="info" id="today_xc">---</span>
                    相对湿度:<span class="info" id="today_gm">---</span>
                    降雨概率：<span class="info" id="today_cy">---</span>
                </div>
                <div class="more_info" style="margin-left:150px" >
                    生活指数提示：<span class="info" id="tips">天气暖和，适宜着单层......</span>
                </div>
            </div>
        </div>
       
        <div id="future_container">
            <div class="future_box">
                <!-- <img src="images/weather_icon/1.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">--</span><span class="future_info">12-16℃</span>
            </div>
            <div class="future_box">
                <!-- <img src="images/weather_icon/3.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">--</span><span class="future_info">12-16℃</span>
            </div>
            <div class="future_box">
                <!-- <img src="images/weather_icon/2.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">--</span><span class="future_info">12-16℃</span>
            </div>
            <div class="future_box">
                <!-- <img src="images/weather_icon/4.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">--</span><span class="future_info">12-16℃</span>
            </div>
            <div class="future_box">
                <!-- <img src="images/weather_icon/5.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">-</span><span class="future_info">12-16℃</span>
            </div>
            <div class="future_box">
                <!-- <img src="images/weather_icon/5.png" alt="天气" /> -->
                <span class="future_info">201X-XX-XX</span>
                <span class="future_info">星期X</span>
                <span class="future_info">-</span><span class="future_info">12-16℃</span>
            </div>
        </div>
    </section>
    <script>
        $(function(){
            $.get("http://api.tianapi.com/txapi/tianqi/index",{
                key:"59c2e65191f8efd81610ddc5fbd75519",
                city:'广州'
            },function(res){
               
               $("#today_city").text(res.newslist[0].area)
               $("#today_date").text(res.newslist[0].date)
               $("#today_week").text(res.newslist[0].week)
               $("#today_other").text(res.newslist[0].weather)
               $("#today_wd").text(res.newslist[0].highest)
               $("#today_fl").text(res.newslist[0].windsc)
               $("#today_fx").text(res.newslist[0].wind)
               $("#today_pm").text(res.newslist[0].pcpn)
               $("#today_zwx").text(res.newslist[0].uv_index)
               $("#today_xc").text(res.newslist[0].vis)
               $("#today_gm").text(res.newslist[0].humidity)
               $("#today_cy").text(res.newslist[0].pop)
               $("#tips").text(res.newslist[0].tips)
         
             
          
            })
        })
    </script>
</body>

</html>